import {
  Box,
  Card,
  CardContent,
  CardMedia,
  IconButton,
  LinearProgress,
  Typography,
  Zoom,
} from "@mui/material"
import React, { useEffect, useRef, useState } from "react"
import PauseCircleIcon from "@mui/icons-material/PauseCircle"
import PlayCircleIcon from "@mui/icons-material/PlayCircle"
import { useTheme } from "@mui/material/styles"
import ShareIcon from "@mui/icons-material/Share"
import FavoriteIcon from "@mui/icons-material/Favorite"
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"
import { Dialog } from "antd-mobile"
import { message } from "antd"

export type MusicCardModel = "mini"
export interface MusicCardInfo {
  value?: any
  mocel?: MusicCardModel
  onToggle?: (info: any) => void
  canPlay?: boolean //当前卡片是否可以播放（同时只有一个卡片可以播放）
}
export default (props: MusicCardInfo) => {
  const { value, onToggle, canPlay = true, ...otr } = props
  const theme = useTheme()
  const AUDIO = useRef<HTMLAudioElement>(null)
  const [playProcess, setPlayProcess] = useState(0)
  const [running, setRunning] = useState(false)
  const [ended, setEnded] = useState(true)

  const handleDelete = (record?: any) => {
    Dialog.show({
      content: "要删除该歌曲吗?",
      closeOnAction: true,
      actions: [
        [
          {
            key: "cancel",
            text: "取消",
            danger: true,
          },
          {
            key: "ok",
            text: "确认",
          },
        ],
      ],
      onAction: (action) => {
        if (action.key == "ok") {
          message.info("我们将在后续支持删除功能")
        }
      },
    })
  }
  useEffect(() => {
    !canPlay && AUDIO.current?.pause()
  }, [canPlay])
  return (
    <>
      <Zoom in>
        <Card sx={{ width: "100%" }}>
          <audio
            onPlay={() => {
              setRunning(true)
              setEnded(false)
            }}
            onPause={() => {
              setRunning(false)
            }}
            onEnded={() => {
              setEnded(true)
              setPlayProcess(0)
            }}
            onError={() => {
              setRunning(false)
            }}
            onTimeUpdate={() => {
              if (AUDIO.current) {
                const percent =
                  (AUDIO.current.currentTime / AUDIO.current.duration) * 100
                setPlayProcess(parseFloat(percent.toFixed(1)))
              }
            }}
            ref={AUDIO}
            src={value?.url}
          ></audio>
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <Box sx={{ display: "flex", flexDirection: "column" }}>
              <CardContent sx={{ flex: "1 0 auto" }}>
                <Typography component="div">{value?.name}</Typography>
                <Typography
                  variant="subtitle1"
                  component="div"
                  sx={{ color: "text.secondary" }}
                >
                  {value?.singer ?? "未知歌手"}
                </Typography>
              </CardContent>
              <Box sx={{ display: "flex", alignItems: "center", pl: 1, pb: 1 }}>
                <IconButton
                  aria-label="play/pause"
                  onClick={() => {
                    running ? AUDIO.current?.pause() : AUDIO.current?.play()
                    onToggle?.(value)
                    setRunning(!running)
                  }}
                >
                  {running ? (
                    <PauseCircleIcon></PauseCircleIcon>
                  ) : (
                    <PlayCircleIcon />
                  )}
                </IconButton>
                <IconButton aria-label="previous">
                  <FavoriteIcon></FavoriteIcon>
                </IconButton>

                <IconButton
                  onClick={() => {
                    handleDelete(value)
                  }}
                  aria-label="delete"
                  color="error"
                >
                  <DeleteOutlineIcon></DeleteOutlineIcon>
                </IconButton>
              </Box>
            </Box>
            <CardMedia
              component="img"
              sx={{ width: 151 }}
              image={value?.cover}
              alt="Live from space album cover"
            />
          </Box>
          {!ended ? (
            <LinearProgress variant="determinate" value={playProcess} />
          ) : null}
        </Card>
      </Zoom>
    </>
  )
}
